<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form inline size="small" @submit.native.prevent>
        <el-form-item label="实名状态:">
          <el-select v-model="listPram.isRealName" clearable placeholder="全部" style="width: 100px">
            <el-option
                v-for="item in realStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="居住状态:">
          <el-select v-model="listPram.status" clearable placeholder="全部" style="width: 100px">
            <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="保证金缴纳状态:">
          <el-select v-model="listPram.haveNewDeposit" clearable placeholder="全部" style="width: 100px">
            <el-option
                v-for="item in newDepositStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房屋类型:">
          <el-select v-model="listPram.houseType" clearable placeholder="全部" style="width: 100px">
            <el-option
                v-for="item in houseTypeOptions"
                :key="item.value"
                :label="item.houseTypeName"
                :value="item.houseTypeName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房屋关键词:">
          <el-input v-model="listPram.fwkeyword" placeholder="租赁证编号、地址" clearable style="width: 150px"/>
        </el-form-item>
        <el-form-item label="承租人:">
          <el-input v-model="listPram.yhkeyword" placeholder="姓名、身份证号、手机号" clearable style="width: 200px"/>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="primary" @click.native="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item class="el-form-item-align-right">
          <el-button
              icon="el-icon-upload2"
              @click="handleExport('multi')"
              type="primary" size="mini" v-has-permi="['admin:house:information:export']">批量导出
          </el-button>
        </el-form-item>
        <el-form-item class="el-form-item-align-right">
          <el-button icon="el-icon-upload2" size="mini" type="primary" v-has-permi="['admin:house:information:import']">
            批量导入
          </el-button>
        </el-form-item>
        <el-form-item class="el-form-item-align-right">
          <router-link :to=" { path:'/lessee/change/edit' } ">
            <el-button icon="el-icon-edit" size="mini" type="primary"
                       v-has-permi="['admin:lessee:save']">新增
            </el-button>
          </router-link>
        </el-form-item>

      </el-form>
      <el-table :data="listData.list" size="small"
                :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
        <el-table-column align="center"
                         type="selection"
                         width="50">
        </el-table-column>
        <el-table-column align="center" label="ID" prop="id" width="60"></el-table-column>
        <el-table-column align="center" label="照片" prop="faceUrl" width="120">
          <template slot-scope="scope">
            <el-image
                referrerpolicy="no-referrer"
                style="width: 66px!important; height: 66px!important;"
                :src="imageUrl+scope.row.faceUrl"
                fit="cover"
                :preview-src-list="[imageUrl+scope.row.faceUrl]"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名" prop="tenantName" width="75">
          <template slot-scope="scope">
              <span :style="{
                border: scope.row.isArrearage === true ? '2px solid #ff4949' : 'none',
                padding: '2px',
                display: 'inline-block'
              }">
                {{ scope.row.tenantName }}
              </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="身份证号" prop="tenantIdCard" width="150"/>
        <el-table-column align="center" label="联系方式" prop="tenantPhone" width="100"/>
        <el-table-column align="center" label="工作单位" prop="tenantCompany" width="120"/>
        <el-table-column align="center" label="家庭成员" prop="familyMembersCount" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="showFamilyMembers(scope.row)">{{ scope.row.familyMembersCount }}</el-button>
          </template>
        </el-table-column>
<!--        <el-table-column align="center" label="承租人顺序" prop="tenantSerialNumber" width="120"/>-->
        <el-table-column align="center" label="历史承租房屋" width="140">
          <template slot-scope="scope">
            <template v-if="scope.row.houseInfoList && scope.row.houseInfoList.length > 0">
              <span v-for="(house, index) in scope.row.houseInfoList" :key="index">
                <span @click="handleHouse(house.idValue)" class="clickable-link" style="margin-right: 4px;">
                  {{ house.leaseCertificateNumber }}-{{ house.areaName }}-{{ house.streetName }}
                </span>
                <span v-if="index < scope.row.houseInfoList.length - 1">, </span>
            </span>
            </template>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <!--        <el-table-column align="center" label="建立租赁时间" prop="leaseRelationshipTime" width="120"/>-->
        <!--        <el-table-column align="center" label="结束租赁周期" prop="areaName" width="120"/>-->
        <!--        <el-table-column label="保证金缴纳情况" header-align="center">-->
        <!--          <el-table-column align="center" label="缴纳保证金" prop="newDeposit" width="120"/>-->
        <!--          <el-table-column align="center" label="缴纳时间" prop="newDepositPaymentTime" width="120"/>-->
        <!--          <el-table-column align="center" label="归还保证金" prop="newDepositReturned" width="120"/>-->
        <!--          <el-table-column align="center" label="归还时间" prop="newDepositReturnTime" width="120"/>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column align="center" label="租赁状态" prop="liveStatus" width="120"/>-->
        <el-table-column align="center" label="绑定授权手机号" prop="wechatPhoneNumber" width="120">
          <template slot-scope="scope">
            <!-- 有权限时显示可点击链接 -->
            <span
                @click="handleUser(scope.row.wechatPhoneNumber)"
                class="clickable-link">
                 {{ scope.row.wechatPhoneNumber }}
            </span>
            <!-- 无权限时显示普通文本 -->
            <!--            <span v-else>-->
            <!--              {{ scope.row.firstTenantPhone || '&#45;&#45;' }}-->
            <!--            </span>-->
          </template>
        </el-table-column>
        <el-table-column align="center" label="实名状态" width="75">
          <template slot-scope="scope">
            <span :style="{ color: scope.row.faceAuthenticationTime ? 'green' : 'red' }">
              {{ scope.row.faceAuthenticationTime ? '已实名' : '未实名' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="欠费状态" width="75">
          <template slot-scope="scope">
            <span :style="{ color: scope.row.isArrearage ===true? 'red' : 'green' }">
              {{ scope.row.faceAuthenticationTime === true ? '欠费' : '正常' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="说明" prop="remarks" width="80">
          <template slot-scope="scope">
            <span @click="showDialog(scope.row)" class="clickable-link">查看</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <router-link :to=" { path:'/lessee/change/edit/' + scope.row.id + '/1'}">
              <el-button icon="el-icon-edit" size="mini" type="primary" style="margin-left: 10px"
                         v-has-permi="['admin:lessee:save']">详情
              </el-button>
            </router-link>
            <el-button icon="el-icon-delete" size="mini" type="danger" @click="handlerDelete(scope.row.id)"
                       style="margin-left: 10px"
                       v-has-permi="['admin:lessee:delete']">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="listPram.page"
          :page-sizes="[10,20,40,60,80,100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-card>
    <!--    <el-dialog-->
    <!--        :visible.sync="editDialog.visible"-->
    <!--        :title="editDialog.isCreate === 0? '编辑':'新增'"-->
    <!--        destroy-on-close-->
    <!--        :close-on-click-modal="false"-->
    <!--        top="50px"-->
    <!--        width="1200px">-->
    <!--      <edit-->
    <!--          v-if="editDialog.visible"-->
    <!--          :is-create="editDialog.isCreate"-->
    <!--          :edit-data="editDialog.editDate"-->
    <!--          @hideEditDialog="hideEditDialog"-->
    <!--          ref="editForm"-->
    <!--      />-->
    <!--    </el-dialog>-->


    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="家庭成员信息" width="50%">
      <el-table :data="currentFamilyMembers" border>
        <el-table-column align="center" prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column align="center" prop="relationship" label="关系" width="120"></el-table-column>
        <el-table-column align="center" prop="company" label="单位" min-width="120"></el-table-column>
        <el-table-column align="center" prop="phone" label="联系电话" width="120"></el-table-column>
        <el-table-column align="center" prop="isContact" label="是否紧急联系人" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.isEmergencyContact === 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible2" title="退租时间" width="30%">
      <p>退租时间：{{ currentRow.exitTime }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {deleteRow, list} from "@/api/lessee";
import {checkPermi} from "@/utils/permission";
import {exportMultiColumn} from "@/api/export";
import hasPermi from "@/directive/permission/hasPermi";
import {getAdminGetFwlx} from "@/api/house";

export default {
  computed: {
    hasPermi() {
      return hasPermi
    }
  },
  data() {
    return {
      listData: {
        list: [], total: 0
      },
      listPram: {
        page: 1,
        limit: 10,
        yhkeyword: '',
        fwkeyword: '',
        haveNewDeposit: '',
        houseType: '',
        isRealName: '',
        status: '',
      },
      editDialog: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editDate: {},
      },
      tableLoading: false,
      houseTypeOptions: [],
      imageUrl: '',
      realStatusOptions: [{
        value: '0',
        label: '否'
      }, {
        value: '1',
        label: '是'
      }],
      statusOptions: [{
        value: '0',
        label: '无效'
      }, {
        value: '1',
        label: '租赁中'
      }, {
        value: '2',
        label: '已退租'
      }, {
        value: '3',
        label: '已变更'
      }],
      newDepositStatusOptions: [{
        value: '0',
        label: '未缴纳'
      }, {
        value: '1',
        label: '已缴纳'
      }, {
        value: '2',
        label: '已退还'
      }],
      dialogVisible: false,
      dialogVisible2: false,
      currentFamilyMembers: [],
      currentRow: {} // 当前行的数据


    }
  },
  mounted() {
    this.imageUrl = process.env.VUE_APP_IMAGE_URL

    // 获取查询参数(房屋管理的当前承租人)
    const lesseeName = this.$route.query.lesseeName; // 获取查询参数
    if (lesseeName) {
      this.listPram.name = lesseeName
      list(this.listPram).then(res => {
        this.listData = res;
      }).finally(() => {
      })
    } else {
      this.getList()
    }
    this.getHouseType()
  },
  methods: {
    checkPermi,
    getList() {
      this.tableLoading = true
      list(this.listPram).then(res => {
        this.listData = res;

      }).finally(() => {
        this.tableLoading = false;
      })

    },
    getHouseType() {
      // 获取房屋类型
      getAdminGetFwlx().then((res) => {
        this.houseTypeOptions = res
      })
    },
    openEdit(isCreate, editDate) {
      this.editDialog.editDate = editDate;
      this.editDialog.isCreate = isCreate;
      this.editDialog.visible = true
    },
    handlerDelete(id) {
      this.$confirm('确认删除该数据吗？').then(() => {
        const loading = this.$loading({text: '删除中', background: 'rgba(255,255,255,.5)'})
        deleteRow(id).then(() => {
          this.$message.success('删除成功')
          this.getList()
        }).finally(() => {
          loading.close()
        })
      })
    },
    handleExport() {
      exportMultiColumn().then(() => {
      }).finally(() => {
      })
    },
    hideEditDialog() {
      this.editDialog.visible = false
      this.getList()
    },
    handleSizeChange(val) {
      this.listPram.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listPram.page = val
      this.getList()
    },
    resetQuery() {
      this.listPram.yhkeyword = '';
      this.listPram.fwkeyword = '';
      this.listPram.haveNewDeposit = '';
      this.listPram.houseType = '';
      this.listPram.isRealName = '';
      this.listPram.status = '';
      this.listPram.page = 1;
      this.getList()
    },
    handleSearch() {
      this.listPram.page = 1;
      this.getList();
    },
    showFamilyMembers(row) {
      this.currentFamilyMembers = row.familyMembers || [];
      this.dialogVisible = true;
    },
    // 显示弹窗
    showDialog(row) {
      this.currentRow = row; // 保存当前行数据
      this.dialogVisible2 = true; // 打开弹窗
    },

    handleUser(firstTenantPhone) {
      this.$router.push({
        path: '/user/index',
        query: {
          firstTenantPhone: firstTenantPhone // 携带当前承租人名称作为查询参数
        }
      });
    },
    handleHouse(currentHouse) {
      this.$router.push({
        path: '/house/information',
        query: {
          currentHouse: currentHouse // 携带当前承租人名称作为查询参数
        }
      });
    },


  }
}
</script>

<style scoped lang="scss">
//:deep(.arrearage-row .cell) {
//  border: 2px solid red;
//}
.clickable-link {
  color: #1890ff;
  cursor: pointer;
  text-decoration: none;
}

.clickable-link:hover {
  text-decoration: underline;
  color: #1890ff;
}
</style>
